<!DOCTYPE html>
<html>
  <head>
    <title>登录</title>
    <meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
	<style type="text/css">
		body{
			
			background:url(../image/bg01.jpg) no-repeat;
			background-size: 100%;
			
		}
		#login{
			width: 400px;
			margin:auto;
			margin-top:15%;
			border:1px solid #fff;
			display: relative;
			
		}
		#login form{
			width: 300px;
			margin:auto;
			//margin-top:15%;
			border:1px solid #fff;
			display: relative;
		}

		.panel-footer{
			padding-left: 180px;
		}
	</style>
  </head>
  <body>
    <div id="login" class="panel panel-default">
  		<form role="form"  class="panel-body">
	    	<div class="form-group">
		    	<label>用户名：</label>
		    	<input type="text" class="from-control" id="username">
		    </div>
		    <div class="form-group">
		    	<label>密    码: &nbsp;&nbsp;&nbsp;&nbsp;</label>
		    	<input type="password" class="from-control" id="password">
		    </div>
		    <div class="form-group">
				<label for="name">身份:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
				<input type="radio" name="role" value="student">学生
				<input type="radio" name="role" value="teacher">老师
				<input type="radio" name="role" value="admin">管理员
			</div>
	    </form>
	    <div class="panel-footer">
	    	<a href="" data-toggle="modal" data-target="#registerModal">未有账号？注册一个</a>
	    	<button type="button" class="btn btn-default login"  onclick="login()">登录</button>
	    </div>
  	</div>
  	<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true" data-backdrop="static">
	    <div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="resetForm()">&times;</button>
	                <h4 class="modal-title" id="addModalLabel">注册</h4>
	            </div>
	            <div class="modal-body">
	            	<form role="form">
						<div class="form-group">
							<label for="name">用户名</label>
							<input type="text" name="name" class="form-control required " placeholder="一旦注册不能修改"/>
						</div>
						<div class="form-group">
							<label for="name">用户昵称</label>
							<input type="text" name="nickname" class="form-control required "/>
						</div>
						<div class="form-group">
							<label for="password">密码</label>
							<input type="password" name="password" class="form-control required "/>
						</div>
						<div class="form-group">
							<label for="password">重复密码</label>
							<input type="password" name="passwordAgain" class="form-control required "/>
							<strong style='color:red' class="hidden" id="checkPwd">两次密码不一致</strong>
						</div>
						<div class="form-group">
							<label for="sex">性别</label>
							<select name="sex" class="form-control required">
								<option>男</option>
								<option>女</option>
							</select>
						</div>
						<div class="form-group">
							<label for="telphone">电话</label>
							<input type="text" name="tel" class="form-control required "/>
						</div>
						<div class="form-group">
							<label for="school">学校</label>
							<input type="text" name="school" class="form-control required "/>
						</div>		
						<div class="form-group">
							<label for="major">专业</label>
							<input type="text" name="major" class="form-control required "/>
						</div>
						<div class="form-group">
							<label for="number">学号</label>
							<input type="text" name="number" class="form-control required "/>
						</div>
						<div class="form-group">
							<label for="grade">年级</label>
							<select name="grade" class="form-control required">
							</select>
						</div>               		
	            	</form>
	            </div>
	            <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="resetForm()">关闭</button>
	                <button type="button" class="btn btn-primary btn-submit">注册</button>
	            </div>
	        </div><!-- /.modal-content -->
	    </div><!-- /.modal -->
	</div>
    <script src="../js/jquery-3.2.1.min.js"></script>
	<script src="../js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(function() {
			getYear();	
		});
		function login(){
			var username=$("#username").val();
			var password=$("#password").val();
			var role=$("#login form input[name='role']:checked").val();
			if(username==""||password==""||role==undefined){
				alert("用户名和密码不能为空！");
			}else{
				$.ajax({
					url : '/userController/login',
					type : "post",
					cache : false,
					dataType:"json",
					contentType : "application/json;charset=utf-8",
					data:JSON.stringify({
						username:username,
						password:password,
						role:role
					}),
					success : function(data) {
						var user=data.user;
						sessionStorage.setItem("role",role);
						if(data.resultCode==1){
							if(role=="admin"){
								window.location.href="admin/adminIndex.html";
								sessionStorage.setItem("id",user.id);
								sessionStorage.setItem("name",user.name);
								sessionStorage.setItem("tel",user.tel);
							}else if(role=="teacher"){
								window.location.href="../index.html";
								window.history.back();
								sessionStorage.setItem("id",user.tId);
								sessionStorage.setItem("nickname",user.tNickname);
								sessionStorage.setItem("name",user.tName);
								sessionStorage.setItem("sex",user.tSex);
								sessionStorage.setItem("tel",user.tTel);
							}else if(role=="student"){
								window.location.href="../index.html";
								window.history.back();
								sessionStorage.setItem("id",user.stId);
								sessionStorage.setItem("nickname",user.stNickname);
								sessionStorage.setItem("name",user.stName);
								sessionStorage.setItem("sex",user.stSex);
								sessionStorage.setItem("tel",user.stTel);
								sessionStorage.setItem("school",user.stSchool);
								sessionStorage.setItem("grade",user.stGrade);
								sessionStorage.setItem("number",user.stNumber);
								sessionStorage.setItem("major",user.stMajor);
							}
						}else if(data.resultCode==0){
							alert("密码错误");
						}else{
							alert("用户名不存在");
						}
						
					}
				})
			}
			
		}
		$("form :input[name='passwordAgain']").blur(function(event) {
			var pwd1=$("form :input[name='password']").val();
			var pwd2=$("form :input[name='passwordAgain']").val();
			if(pwd1!=pwd2){
				$("#checkPwd").removeClass('hidden');
				$("#registerModal .btn-submit").attr('disabled',true);
			}else{
				$("#checkPwd").addClass('hidden');
				$("#registerModal .btn-submit").removeAttr('disabled');
			}
		});
		$("#registerModal .btn-submit").click(function(event) {
			var params={};
            params.name=$("#registerModal form input[name='name']").val();
            params.nickname=$("#registerModal form input[name='nickname']").val();
            params.password=$("#registerModal form input[name='password']").val();
            params.sex=$("#registerModal form select[name='sex']").val();
            params.tel=$("#registerModal form input[name='tel']").val();
            params.school=$("#registerModal form input[name='school']").val();
            params.major=$("#registerModal form input[name='major']").val();
            params.number=$("#registerModal form input[name='number']").val();
            params.grade=$("#registerModal form select[name='grade']").val();
            if(isNull()){
            	$.ajax({
	              url: '/studentController/add',
	              type: 'post',
	              dataType : "json",
	              contentType : "application/json;charset=utf-8",
	              data: JSON.stringify(params),
	              success:function(data){
	                if(data==1){
	                  alert("添加学生成功！");
	                  resetForm();
	                }else{
	                  alert("添加学生失败！");
	                }
	              }
	            });
	            $("#registerModal").modal('hide');
            }
            
			
		});

		$("form :input.required").each(function(){
			$(this).parent().prepend("<strong style='color:red'>*</strong>");
		})

		function isNull(){
			$("form :input.required").each(function(){
				var obj=$(this).parent().find('.alarm');
				if($(this).val()==""){
					if(obj.length==0){
						$(this).parent().append("<b style='color:red' class='alarm'>该字段不能为空! </b>");
					}
				}else{
					$(this).parent().find('.alarm').remove();
				}

			})
			var arr=$("form :input.required").filter(function(index) {
				return $(this).val()=="";
			});
			if(arr.length!=0){
				alert("请填入完整信息！");
				return false;
				
			}else{
				return true;
			}
		}

		$("#registerModal form input[name='name']").blur(function(){
		    var name=$("#registerModal form input[name='name']").val();
		    $.ajax({
		      url: '/userController/isExist',
		      type: 'post',
		      data: {
		        name: name,
		        type:"student" 
		      },
		      contentType : "application/x-www-form-urlencoded",
		      success:function(data){
		          if(data==1){
		            alert("该用户名已存在");
		            $("#registerModal .btn-submit").attr('disabled',true);
		          }else{
		            $("#registerModal .btn-submit").removeAttr('disabled');
		          }
		        }
		    });
		});

		$("form input[name='tel']").blur(function(){
		    var tel=$("#registerModal form input[name='tel']").val();
		    var pattern=/^1[34578]\d{9}$/;
		    if(!pattern.test(tel)){
		    	if($(this).parent().find(".tel").length==0){
		    		$(this).parent().append("<b style='color:red' class='tel'> X请输入正确的电话格式!</b>");
		    		$("#registerModal .btn-submit").attr('disabled',true);
		    	}
		    }else{
		      $(this).parent().find(".tel").remove('.tel');
		      $("#registerModal .btn-submit").removeAttr('disabled');
		    }
		});

		function resetForm(){
		  $("form input").each(function(index, el) {
		  	if($(el).attr('type')!="radio"){
		  		$(el).val("");
		  	}
		    $(this).parent().find('.alarm').addClass('hidden');
		    $(this).parent().find('.tel').addClass('hidden');
		    $(this).parent().find('#checkPwd').addClass('hidden');
		  });
		}
		function getYear(){
			var date=new Date();
			var year=date.getFullYear();
  			for (var i =2010; i <=year; i++){
			    $("select[name='grade']").append('<option>'+i+'</option>')
			}
			 
		}
	</script>
  </body>
</html>
